.topcorner-image {
      position: fixed;
      top: 0;
      display: inline-block;
      right: 0;
      width: 200px;  /* this is top right corner */
    }
.bottomcorner-image{
  position: fixed;
      bottom: 0; 
      display: inline-block;
      left: 0; /* this is bottom left */
      
}
.bottomrightcorner-image{
  position: fixed;
  display: inline-block;
      bottom: 0; 
      right: 0; /* this is bottom right */
}

.right-image{
      position: fixed;
      top: 0;
      display: inline-block;
      right: 0;
      width: 30vw;   /* 50% of viewport width */
      height: 70vh; /* full height */
      object-fit: cover; /* keeps it nicely scaled */
    }
 .leftmid-image {
      position: fixed; /* this is top left */
      top: 0;
      left: 0;
      width: 30vw;   /* 50% of viewport width */
      height: 70vh; /* full height */
      object-fit: cover; /* keeps it nicely scaled */
    }
    .bottomleftmid-image {
      position: fixed; /* this is top left */
      bottom: 0;
      left: 40%;
    }
     .backys {
  border-radius: 50%;
}
   .toplefter-image {
      position: fixed;
      top: 0;
      left: 40%;
      width:10%; /* top middle */
    }
    .left-image {
      position: fixed;
      top: 0;
      left: 25%;
      width:10%; /* this is a little above bottom left */
    }
    .lefter-image {
      position: fixed;
      top: 0;
      left: 40%;
      width:10%; /* this is a little further above bottom left */
    }
      .lefterer-image {
      position: fixed;
      top: 20%;
      left: 55%;
      width:20%; /* this is a little above bottom left */
    }
    .upleft-image {
      position: fixed;
      top: 40%;
      left: 0;
      width:20%; /* this is a little above bottom left */
    }
      .righterer-image {
      position: fixed;
      top: 30%;
      right: 25%;
    }
    
     .lefterist-image {
      position: fixed;
      top: 50;
      left: 55%;
     /* this is a little further above bottom left */
    }